<template>
  <span>
    <el-button plain
               @click="handleBulk">{{data.name}}</el-button>
    <el-dialog title="提示"
               class="dialog-box"
               :visible="visible"
               :close-on-click-modal="false"
               :width="width"
               top="43vh"
               :before-close="handleClose">
      <div>
        <template v-if="isFooter">
          <div class="flex-align">
            <i class="el-icon-warning warn"></i>
            <span>{{ content }}</span>
          </div>
        </template>
        <template v-else>
          <span v-if="!stopLoop"
                class="warning-item">
            <img class="execute-gif"
                 :src="executeGif">
            {{ progressContent }}
          </span>
          <span v-if="stopLoop"
                class="warning-item">
            <img class="warning-img"
                 :src="warning">
            {{ tipContent }}
          </span>
        </template>
      </div>
      <!-- <WaybillSignContent :value="result"
                          :selection="value.selection"
                          :stop-loop="stopLoop"
                          :is-footer="isFooter" /> -->
      <span v-if="isFooter"
            slot="footer"
            class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :loading="loading"
                   type="primary"
                   @click="handleSubmit">确 定</el-button>
      </span>
      <div v-if="stopLoop"
           slot="footer"
           class="dialog-footer">
        <el-button @click="handleCancel">我知道了</el-button>
      </div>
    </el-dialog>
  </span>
</template>
<script>
import BatchMixin from '../mixins/batch.mixin'
// import WaybillSignContent from '../../advance/WaybillSignContent.vue'

export default {
  name: "BulkBatch",
  // components: { WaybillSignContent },
  mixins: [BatchMixin],
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    data: {
      type: Object,
      default: () => { }
    }
  },
  inject: ['$table'],
  data () {
    return {
      // visible: false,
      stopLoop: false,
      // result: {},
      timer: null,
      // taskId: null,
      // loading: false,
      isFooter: true,
      height: '90px'
    }
  },
  computed: {
    width () {
      return '420px'
    },
    idCountExceeded () {
      return this.value?.selection?.length || 0
    },
    name () {
      return this?.data?.name
    }
  },
  watch: {
    visible () {
      this.stopLoop = false
      this.isFooter = true
      this.loading = false
      this.taskId = null
      this.result = {}
    }
  },
  created () {
  },
  beforeDestroy () {
    this.$once("hook:beforeDestroy", () => clearInterval(this.timer));
  },
  methods: {
    handleBulk () {
      if (!this.idCountExceeded) {
        return this.$message.warning("请至少选择一条数据")
      }
      this.visible = true
    },
    handleClose () {
      if (this.stopLoop) {
        this.visible = false;
        this.$table.search();
        return;
      }
      if (this.taskId) {
        this.stopLoop = true;
        return;
      }
      if (this.loading) {
        this.$message.warning(`${this.name}正在进行中`);
        return;
      }
      this.visible = false;
    },
    handleCancel () {
      this.timer = setTimeout(() => {
        this.stopLoop = true
        this.isFooter = false
      }, 0);
      this.visible = false
      this.$table.search();
    },
    async handleSubmit () {
      this.loading = true
      this.taskId = await this.batchInterface()
      if (this.taskId) {
        this.isFooter = false
        this.procedure(this.taskUrl, this.taskId)
        return
      }
    }
  },
}
</script>

<style scoped>
/* 15px 15px 10px  5px 15px 0     10px 15px */
.dialog-box >>> .el-dialog__header {
  padding: 10px 15px 10px;
  background: #ffffff;
}
.dialog-box >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog-box {
  text-align: left;
}

.dialog-box >>> .el-dialog__body {
  padding: 10px 15px;
  /* font-size: 16pc; */
}
.dialog-box >>> .el-dialog__footer {
  padding: 5px 15px 15px;
}
.warning-item {
  line-height: 20px;
  display: flex;
  align-items: center;
}
.warning-item .warning-img {
  width: 48px;
  height: 48px;
  /* font-size: 50px; */
  color: #e6a23c;
  padding-right: 20px;
}

.execute-gif {
  width: 48px;
  height: 48px;
  padding-right: 15px;
}
.dialog-footer {
  text-align: right;
}
.flex-align {
  display: flex;
  align-items: center;
}
.warn {
  color: #e6a23c;
  font-size: 24px;
  padding-right: 12px;
}
</style>